<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>
    <title>Basic Custom Example</title>

{{include 'pages/base/layout.html'}}


    <script src="{{=URL('static','adminlte/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
    <script src="{{=URL('static','adminlte/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js')}}"></script>
    <link rel="stylesheet" href="{{=URL('static','adminlte/plugins/datepicker/datepicker3.css')}}">

    <script src="{{=URL('static','adminlte/plugins/highcharts/highcharts.js')}}"></script>

</head>

<script language="JavaScript">
    var policy_id
    $(document).ready(function () {
        policy_id = "{{=policy_id}}"
        $("#beginDatepicker").datepicker({language: 'zh-CN', format: 'yyyy-mm-dd'}).datepicker('setDate', '2016-01-01');
        $("#endDatepicker").datepicker({language: 'zh-CN', format: 'yyyy-mm-dd'}).datepicker('setDate', '2016-12-31');
    });

    function retest() {
        parent.$("#loading").show();
        $.ajax({
            type: 'POST',
            async: false,
            dataType: "json",
            url: '{{=URL('alpha_main_v2','risk_attrib')}}',
            data: {
                'policy_id': policy_id,
                'begindate': $("#beginDatepicker").val(),
                'enddate': $("#endDatepicker").val()
            },
            success: function (data) {
                parent.$("#loading").hide();
                if (data.status == "error") {
                    alert(data.msg)
                }
                debugger;
                $('#home').highcharts(data.f_pre_chart);
                $('#industryfac').highcharts(data.f_inds_chart);
            }
        });

    }
</script>
<body>

<div class='container'>
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="name">起始时间:</label>
            <input type="text" class="form-control input-sm" id="beginDatepicker" placeholder="请输入起始时间">
        </div>
        <div class="form-group">
            <label class="sr-only" for="name">结束时间:</label>
            <input type="text" class="form-control input-sm" id="endDatepicker" placeholder="请输入结束时间">
        </div>
        <button type="button" onclick="retest()" class="btn btn-danger btn-sm">运行风险归因</button>
    </form>

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            风格因子
        </a>
    </li>
     <li>
        <a href="#industryfac" data-toggle="tab">
            行业因子
        </a>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <div id="f_pre_chart" style="width: 98%; height: 98%; margin: 0 auto"></div>
    </div>
    <div class="tab-pane fade" id="industryfac">
        <div id="f_inds_chart" style="width: 98%; height: 98%; margin: 0 auto"></div>
    </div>
</div>

</div>
</body>
</html>